<template>
  <div class="wb" style="padding:15px;  background: #fff; box-shadow: 0 0 3px #ccc;">
    <div style="display: inline;" class="wbForm">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="" class="search_select">
          <el-select multiple collapse-tags clearable v-model="queryForm.wbTypeList" filterable placeholder="按业务">
            <el-option v-for="(item,index) in businessList" :key="index" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-select multiple collapse-tags clearable v-model="queryForm.wbStatusList" filterable placeholder="按状态">
            <el-option v-for="(item,index) in statusList" :key="index" :label="item.label " :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.startTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
          <el-col class="line" :span="1" style="margin-left: -25px;">至</el-col>
          <el-col :span="11">
            <el-date-picker type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" v-model="queryForm.endTime" placeholder="选择日期" style="width: 80%;"></el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item style="margin-left: -70px;">
          <el-button type="primary" class="search" @click="getGzRepairList">查 询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="add_new add_new_img" v-if="hasRole('wb:gz:add')" @click="addWbDetail"> 
    	<img src="@/assets/images/wb.png" /> 
    	<span class="con_txt"> 工装维保</span> 
    </div>
    <!--<div style="display: inline;float: right;margin-top: -40px" class="add add_zl" v-if="hasRole('wb:gz:add')">
      <span @click="addWbDetail"
            style="cursor: pointer !important;background-color: #F2A221;border-radius: 5px;color: white;padding-top: 4px;padding-bottom: 1px;padding-left: 5px;padding-right: 44px;display: inline-block;font-size: 15px;">
        <img src="../../../assets/images/wb.png" style="cursor: pointer;width: 50%"/>
        <label style="display: inline-block;cursor: pointer;position: absolute;margin-top: 4px">工装维保</label>
      </span>
    </div>-->
    <wh-table :height="'675'" :tableData="tableData" :tableLoading="tableLoading" :tableHeader="tableHeader" :option="option" style="margin-top: 5px">
      <template slot-scope="props" slot="operate">
        <div> 
        	<span class="caozuo_span">
        		<a v-if="hasRole('wb:gz:edit')"  @click="editGzLog(props.rowData)">编辑</a>
        	</span> 
        	<span class="caozuo_span">
          	<a @click="completeRepair(props.rowData)" v-if="props.rowData.wbStatus =='2' &&props.rowData.wbType =='2' &&hasRole('wb:gz:over')">维修完毕</a>
        	</span> 
        	<span class="caozuo_span">
          	<a @click="completeRepair(props.rowData)" v-if="props.rowData.wbStatus =='2' &&props.rowData.wbType =='1' &&hasRole('wb:gz:over')">保养完毕</a>
        	</span> 
        	<span class="caozuo_span">
          	<a v-if="!(props.rowData.gzStatus =='5' || props.rowData.gzStatus =='2')&&hasRole('wb:gz:delete')" @click="deleteRepair(props.rowData)">删除 </a>
        	</span> 
        </div>
      </template>
    </wh-table>
    <add-repair :dataDetail="repairData"></add-repair>
    <add-repair-log :dataDetail="repairLog"></add-repair-log>
  </div>
</template>
<script>
  import whTable from "../../../components/wh-table/index";
  import addRepair from "./addRepair.vue";
  import addRepairLog from "./addRepairLog.vue";
  import { formatDate } from '@/utils/formatDate'
  export default {
    name: 'gzRepair',
    data() {
      return {
        tableData: [],
        tableHeader: [],
        tableLoading: true,
        option: {
          showOperate: false,
          headerCell: {
            background: 'rgb(214, 215, 216)',
            color: 'rgba(0, 0, 0, 0.8)'
          }
        },
        repairData: {},
        repairLog: {},
        businessList: [{
          label: "保养",
          value: "1"
        }, {
          label: "维修",
          value: "2"
        }],
        statusList: [{
          label: "待保养/维修",
          value: "0"
        }, {
          label: "已完成",
          value: "1"
        }],
        queryForm: {
          wbStatusList: [],
          wbTypeList: [],
          startTime: "",
          endTime: ""
        },
      }
    },
    components: {
      whTable,
      addRepair,
      addRepairLog
    },
    mounted() {
      let self = this;
      self.$eventBus.$on("updateGzWbDetail", function() {
        self.getGzWbDetail();
      });
      self.getGzWbDetail();
    },
    methods: {
      getGzRepairList() {
        this.getGzWbDetail();
      },
      completeRepair(rowData) {
        let self = this;
        let param = {
          id: rowData.id,
          wbStatus: "1",
          gzId: rowData.gzId
        };
        param.gzStatus = rowData.gzStatus == '5' ? '9' : '8';
        self.$confirm('确定完成？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/repair/updateCompleteRepair",
            method: "post",
            params: param
          }).then(resp => {
            if(resp.success) {
              self.getGzWbDetail();
              self.$notify({
                title: '提示',
                message: "操作成功！",
                type: 'success'
              });
              return
            } else {
              self.$notify({
                title: '提示',
                message: "操作失败",
                type: 'error'
              });
            }
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      deleteRepair(rowData) {
        let self = this;
        let param = {
          id: rowData.id,
          status: "-1"
        };
        self.$confirm('确定删除该记录？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/repair/updateRepairStatus",
            method: "post",
            params: param
          }).then(resp => {
            if(resp.success) {
              self.getGzWbDetail();
              self.$notify({
                title: '提示',
                message: "删除成功！",
                type: 'success'
              });
              return
            } else {
              self.$notify({
                title: '提示',
                message: resp.message,
                type: 'success'
              });
            }
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      },
      editGzLog(row) {
        if(row.useStatus == '0' || !row.repairMan) {
          this.$notify({
            title: '提示',
            message: "请点击工装维保扫码统计！",
            type: 'warning'
          });
          return;
        }
        this.repairLog = Object.assign({}, row);
      },
      addWbDetail() {
        let repairDate = formatDate(new Date(), "yyyy-MM-dd");
        this.repairData = {
          gzCode: "",
          repairMan: "",
          gzName: "",
          repairDate: repairDate,
          wxReason: ""
        };
      },
      handleDefaultTab() {
        let self = this;
        self.tableHeader = [{"columnName": "gzCode", "coloumNameCn": "工装编码"},
          {"columnName": "gzName", "coloumNameCn": "工装名称"},
          {"columnName": "gqName", "coloumNameCn": "工段"},
          {"columnName": "kuWeiCode", "coloumNameCn": "库位号"},
          {"columnName": "produceDate", "coloumNameCn": "保养日期"},
          {"columnName": "maintainPeriod", "coloumNameCn": "保养周期"},
          {"columnName": "maintainDate", "coloumNameCn": "过保时间"},
          {"columnName": "wbTypeCn", "coloumNameCn": "保养类型"},
          {"columnName": "gzStatus", "coloumNameCn": "保养状态", "tag": true},
        ];
        self.option.showOperate = true;
      },
      getGzWbDetail() {
        let self = this;
        self.tableLoading = true;
        self.$http({
          url: "/autoMonitor/repair/queryGzWbDetail",
          method: "post",
          data: JSON.stringify(self.queryForm),
          dataType: 'json',
          contentType: "application/json",
        }).then(resp => {
          if(resp.success) {
            self.tableLoading = false;
            self.handleDefaultTab();
            for(let data of resp.result) {
              if(data.wbStatus == '1' && (data.gzStatus != '6' && data.gzStatus != '7' && data.gzStatus != '10')) {
                data.gzStatus = '0';
              }
            }
            self.tableData = resp.result;
          }
        });
      },
      updateBfDetail(rowData, type) {
        let self = this;
        let msg = type == '0' ? '报废' : '删除';
        let param = {
          id: rowData.id
        };
        type == '0' ? param.status = '-1' : param.deleteStatus = '-1';
        self.$confirm('确定' + msg + '该工区信息？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.$http({
            url: "/autoMonitor/bf/updateDumpStatus",
            method: "post",
            params: param,
          }).then(resp => {
            if(resp.success) {
              self.getBfDetailList();
              self.$notify({
                title: '提示',
                message: msg + "成功！",
                type: 'info'
              });
              return
            }
            self.$notify({
              title: '提示',
              message: "操作失败，请联系管理员！",
              type: 'error'
            });
          });
        }).catch(() => {
          this.$message.info("已取消")             
        });
      }
    }
  }
</script>
<style scoped>
  .wb .el-tag--small {
    height: 20px;
    padding: 0 4px;
    line-height: 17px;
  }
  .wb .el-input__inner {
    font-size: 12px;
  }
  .wb .el-select__tags-text {
    font-size: 12px;
  }
  .wb .el-select__tags {
    max-width: none !important;
  }
  .wb .el-date-editor.el-input,
  .userManage .el-date-editor.el-input__inner {
    width: auto;
  }
  .wb .buttonAdd {
    float: right;
    margin-bottom: 10px;
    padding: 8px 16px;
    font-size: 12px;
    border-radius: 4px;
  }
  .wbForm .el-form-item {
    margin-bottom: 0px !important;
  }
  .wbForm .search {
    background: #34bfc6;
    border-color: #34bfc6;
  }
  .wbForm .el-button--medium {
    padding: 5px 9px !important;
  }
  .wb .el-button--medium {
    padding: 5px 9px !important;
    font-size: 12px;
  }
  .add .el-button--medium {
    padding: 15px 30px !important;
  }
  .wbForm .el-form-item {
    margin-bottom: 0px !important;
  }
</style>